import React, {Component} from 'react'
import {Link} from 'react-router'
import '../sass/HotGoods'
import HotGoodsDefaultBg from '../../global/components/HotGoodsDefaultBg'
import LazyLoad from 'react-lazyload'
import {forceCheck} from 'react-lazyload'

export default class HotGoods extends Component {
  constructor() {
    super()
  }
  componentDidMount() {
    let oMain = document.getElementsByClassName('wrapper')[0]

    oMain.onscroll = function() {
      forceCheck()
    }
  }

  render() {
    const {items, fetchAddToCart} = this.props
    let imgWidth = `${(window.innerWidth - 30) * 0.463}px`

    if (items.length) {
      return (
          <div className="hot-goods">
              {
                  items.map((item, id) =>
                      <div className="hot-box" key={id}>
                          <Link className="img-wrapper" to={`/p/${item.goodsId}`} style={{display: 'block'}}>
                              <LazyLoad height={220} placeholder={<HotGoodsDefaultBg/>}>
                                  <img src={item.pictureUrl ? item.pictureUrl : require('../images/hot_default.png')}
                                       alt=""/>
                              </LazyLoad>
                          </Link>
                          <div>
                              <span className="hot-box-des">
                                  <Link to={`/p/${item.goodsId}`}><p className="goods-name">{item.name}</p></Link>
                                  <div className="goods-price">
                                      <Link to={`/p/${item.goodsId}`}>{
                                      item.isNewAdvance ?
                                        <span><span className="goods-price-sign">预售价</span> {item.advancePrice}</span> :
                                      item.isAssemble ?
                                        <span><span className="goods-price-sign">套餐价</span> {item.price}</span> :
                                      item.salePrice ?
                                          <span><span className="goods-price-sign">企业专享价</span> {item.salePrice}</span> : <span>{item.price}</span>}
                                      </Link>

                                      <span className="hot-box-buy">
                                        {item.goodsInventory && item.isNewAdvance ? <Link className="advance" to={`/p/${item.goodsId}`}>
                                            预购下单
                                        </Link> :
                                        item.goodsInventory ?
                                            <i className="iconfont icon-tianjiagouwuche"
                                            onClick={fetchAddToCart.bind(this, {
                                              count: '1',
                                              goodsId: item.goodsId,
                                              status: '1',
                                              add: true
                                            })}
                                            /> : <span className="stock">已抢完</span>}
                                      </span>
                                  </div>
                                  <Link to={`/p/${item.goodsId}`}>{item.salePrice ? <p className="goods-common-price">门市价 {item.price}</p> : null}</Link>
                              </span>
                          </div>
                      </div>
                  )
              }
          </div>
      )
    } else {
      return (
            <div></div>
      )
    }
  }
}
